import React, {useEffect, useState,useRef} from 'react';
import { View,TouchableOpacity,Animated,Image , Text, StyleSheet, Button } from 'react-native';
import { Camera, useCameraDevice } from 'react-native-vision-camera';
import RecorderAnimation from '../../../animation/RecorderAnimation';
import { CONTENT_SPACING, CONTROL_BUTTON_SIZE, SAFE_AREA_PADDING } from './Constants.ts'
import { CameraRoll } from "@react-native-camera-roll/camera-roll";
import { useRoute } from '@react-navigation/native';

const CameraScreen = ({ navigation }) => {
    const route = useRoute();
    const { mode } = route.params || {};
    const hasVoice =  !mode.includes('NoVoice')
    const hasVideo =  mode.includes('NoPic')
    console.log('hasVideo',mode,hasVideo)

    const [cameraVisible, setCameraVisible] = useState(false)
    const camera = useRef<Camera>(null)

    const device = useCameraDevice('back',
        {
           physicalDevices: [
             'ultra-wide-angle-camera',
             'wide-angle-camera',
             'telephoto-camera'
           ]
     })
      if (!device) {
        return (
            <View>
              <Text>No camera available</Text>
            </View>
        )
      }

    //   屏幕录制
    const startRecording  = async (state) =>{
        console.log('camera-status',state)
        if(state) {
            camera.current.startRecording({
                  onRecordingFinished: async (video) => {
                      console.log('finsish-video',video)
                        const path = video.path
                        await CameraRoll.save(`file://${path}`, {
                          type: 'video',
                        })
                  },
                  onRecordingError: (error) => console.error('video-error',error),
            })
        }else {
            await camera.current.stopRecording()
        }
    }

      const handleStateChange = (state) => {
        // 子组件状态变化时调用，这里更新状态
        startRecording(state)
      };

      return (
          <View style={styles.container}>
                {device != null && (
                  <Camera
                    ref={camera}
                     style={StyleSheet.absoluteFill}
                     device={device}
                     isActive={true}
                     video={true}
                     audio={hasVoice}
                   />
                )}
              {hasVideo && (
                  <View style={{ backgroundColor: "black", flex: 1 }} />
                 )}
             <View style={styles.bottomButtonRow}>
                 <RecorderAnimation onStateChange={handleStateChange} />
              </View>
          </View>
      );
};

const styles = StyleSheet.create({
     container: {
        flex: 1,
        backgroundColor: 'black',
        position: 'relative',
      },
     bottomButtonRow: {
         position: 'absolute',
         alignSelf: 'center',
         bottom: SAFE_AREA_PADDING.paddingBottom,
       },
    absoluteFill: {
     },
});

export default CameraScreen;